<template>
  <el-container id="rootBox" ref="rootBox">
    <iframe
      id="druidIndex"
      :src="indexAction"
      :width="winW - 300 + 'px'"
      :height="winH - 300 + 'px'"
      :style="{'border': '0px', maxHeight: winH - 300 + 'px', 'overflow': 'auto' }"
      scrolling="auto"
    ></iframe>
  </el-container>
</template>

<script>

export default {
  name: 'rootBox',
  data() {
    return {
      indexAction: '/druid/index.html',
      winW: window.outerWidth,
      winH: window.outerHeight,
      id: 'druidIndex',
    }
  },
  methods: {
    //frame加载以后
    frameLoad() {
      this.setCss()
      setTimeout(() => {
        this.setCss()
      }, 500)
    },

    setCss() {
      let contentWindow = $($('#' + this.id).prop('contentWindow').document)
      //隐藏广告
      contentWindow.find('.footer').hide()

      //表头不换行
      contentWindow.find('#dataTable').find('th').css({
        whiteSpace: 'nowrap',
      })
    }
  },
  mounted() {
    let iframe = document.getElementById(this.id)
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', () => {
        this.frameLoad()
      })
    } else {
      iframe.onload = () => {
        this.frameLoad()
      }
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
